CloudFront + S3 の静的Webサイト構築に役立つ情報まとめ

この記事は アノテーション株式会社 AWS Technical Support Advent Calendar 2022 | Advent Calendar 2022 - Qiita 8日目の記事です。

はじめに

アノテーション テクニカルサポートチームの Shimizu です。

CloudFront + S3 で構成した静的 Web サイトはサーバーレスで管理が楽なため、ご検討される方も多いでしょう。
一方で従来のWebサーバーの運用に慣れている方は少し戸惑うかもしれません。例えば慣れ親しんだ .htaccess ファイルが無いため「S3 でこの設定ってどうやるの？」という疑問にぶつかることもあると思います。

そこで本記事では、実際によくいただくお問い合わせを元に、CloudFront + S3 の Webサイト構築時に役立つ情報をまとめてみました！

• S3 バケットへの直接アクセスを禁止したい
• サブディレクトリに末尾 "/" でアクセスしたときに "/index.html" を表示させたい
• 存在しないページへアクセスした時にステータスコード 404 を返したい
• 403 や 404 のエラー時に任意のエラーページを表示させたい
• Basic 認証を実装したい
• Webサイトの更新時に自動で CloudFront キャッシュを削除したい
• S3 の静的Webサイトにメールフォームやブログ機能を実装したい

S3 バケットへの直接アクセスを禁止したい

ほとんどの場合、まず S3 バケットへの直接アクセスを禁止し、CloudFront 経由のアクセスのみに制限することを検討すると思います。 これは CloudFront で「Origin Access Control（OAC）」というアクセス許可を発行し、S3 側のバケットポリシーに設定することで実現できます。詳しい手順は下記を参考にしてください。

サブディレクトリに末尾 "/" でアクセスしたときに "/index.html" を表示させたい

CloudFront + S3 構成のWebサイトにブラウザでアクセスすると、以下のような事象に遭遇するはずです。
（例）
https://example.com/test/ にアクセスしたときに
https://example.com/test/index.html が表示される想定だが、"Access Denied" エラーになる。

これは S3 の仕様によるもので、解消するには追加設定が必要になります。
具体的には CloudFront Functions という関数を作成し、ディストリビューションに適用することで実現できます。詳しい手順は下記を参考にしてください。

存在しないページへアクセスした時にステータスコード 404 を返したい

一般的なWebサーバーだと、存在しないページへアクセスした際にステータスコード 404(not found)が返ります。ところが S3 のWebサイトの場合、403(forbidden)が返ってきます。これは S3 の仕様によるものです。

存在しないページへアクセスした時、Webサーバーのように 404 のステータスコードを返却したい場合は、下記を参考に S3 のバケットポリシーを変更してください。

403 や 404 のエラー時に任意のエラーページを表示させたい

CloudFront + S3 構成のデフォルトのエラー画面は、以下のような感じです。

404 エラー画面の例：

ただの 404 not found ですが、何やら大仰なエラーに見えてしまいますね。
お好みのエラーページに変更するには、CloudFront 側のカスタムエラーレスポンスで設定します。外部ページへのリダイレクトも、ひと手間が必要ですがキャッシュ動作で実現できます。詳しい手順は下記を参考にしてください。

Basic 認証を実装したい

CloudFront + S3 の構成でステージング環境を構築した時は、限られた人のみ閲覧できるように Basic 認証を実装したくなります。その時は下記の記事を参考に、CloudFront Functions で設定しましょう。

Webサイトの更新時に自動で CloudFront キャッシュを削除したい

Webサイトを更新して S3 バケット内のファイルを書き換えたあと、変更を即座にブラウザに反映するには、CloudFront ディストリビューションのキャッシュ削除操作を行う必要があります。これを毎回行うのは手間がかかるので、自動化したくなります。

下記は他社様の記事ですが、手順を丁寧に解説されていたので紹介します。参考にしてみてください。

S3 の静的Webサイトにメールフォームやブログ機能を実装したい

S3 でホスティングするWebサイトではサーバーサイド開発言語（PHP、Python、Ruby 等）を使用できませんが、JavaScript + 外部APIを組み合わせることで、自由度の高い動的コンテンツを実装することも可能です。下記はほんの一例ですが、ぜひ参考にしてみてください。

さいごに

いかがでしたでしょうか。
筆者も一般的なWebサーバーの運用経験が長かったため、CloudFront + S3 のWebサイトを最初に構築した時は、概念の違いに少し戸惑いました。
しかし一旦慣れてしまうと、やはりサーバー管理が不要なのはとても楽で、開発に集中できるメリットは大きいと思います。
この記事がお役に立てば幸いです！

アノテーション株式会社について

アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。